<template>
  <li class="fooditem" @click="tiao">
    <div class="fooditemimg">
      <van-image
        round
        width="50px"
        height="50px"
        :src="items.thumb_image_url"
      />
    </div>

    <div class="fooditemcont">
      <span>{{ items.name }}</span>
      <span class="kaluli">
        <span style="color: red">{{ items.calory }}</span> 千卡/100克</span
      >
    </div>

    <div class="nenglianzhi" v-if="!foodbank">
      <span v-if="items.health_light === 1" style="background: #9ed900"></span>
      <span v-if="items.health_light === 2" style="background: #ffd900"></span>
      <span v-if="items.health_light === 3" style="background: #ff3300"></span>
    </div>
    <div class="duibi" v-else>+加入对比</div>
  </li>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  props: ["items"],
  computed: {
    ...mapState(["foodbank"]),
  },
  methods: {
    ...mapMutations(["setonekongbailist", "settwokongbailist"]),
    tiao() {
      if (this.foodbank) {
        let nun = null;
        this.axios
          .get(`https://food.boohee.com/fb/v1/foods/${this.items.code}`)
          .then((res) => (nun = res.data))
          .then(() => {
            let number = JSON.parse(window.localStorage.getItem("number"));

            if (number === 1) {
              // console.log(123, nun);
              this.setonekongbailist(nun);
              // window.localStorage.setItem(
              //   "onekongbailist",
              //   JSON.stringify(nun)
              // );
            } else {
              this.settwokongbailist(nun);
            }
          });
        this.$router.push({
          path: "/foodscontrast",
        });
      } else {
        this.$router.push({
          path: "/itemdetailspages",
          query: { name: this.items.code },
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fooditem {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ededed;
  padding: 10px 10px;
  .fooditemimg {
    width: 15%;
  }
  .fooditemcont {
    flex: 1;
    display: flex;
    flex-direction: column;
    .kaluli {
      font-size: 15px;
      margin-top: 5px;
    }
  }
  .nenglianzhi {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: right;
    align-items: center;
    span {
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
  }
  .duibi {
    padding: 8px 5px;
    border: 1px solid #ff6b70;
    border-radius: 2px;
    color: #ff6469;
  }
}
</style>